<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>提现</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/aui.css"/>
    <script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        document.writeln("<script type=\"text/javascript\" src=\"js/common.js?" + Math.random() + "\"></scr" + "ipt>");
    </script>

</head>
<style>
    .box {
        padding: 1.5rem;
        background: #f5f5f5;
    }
    .box_show {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        bottom: 0;
        display: none;
        z-index: 10;
    }
    .withdraw_box {
        box-shadow: 0px 5px 20px #ebebeb;
        background: #fff;
        border-radius: 4px;
    }

    .withdraw_name {
        height: 6.5rem;
        color: #101010;
        background: #fafafa;
    }

    .withdraw_name > div:nth-child(1) {
        float: left;
        font-size: 1.5rem;
    }

    .withdraw_name > div:nth-child(2) {
        float: right;
        font-size: 1.5rem;
        line-height: 6.5rem;

    }

    .withdraw_logo {
        color: #101010;
        padding: 0 2.5rem;
        background: #fafafa;
    }

    .withdraw_logo p:nth-child(1) {
        float: left;
        line-height: 6.5rem;
        margin-right: 2.7rem;
        font-size: 1.4rem;
        color: #101010;
    }

    .name {
        float: left;
        line-height: 6.5rem;
        font-size: 1.4rem;
        color: black;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        width: 9rem;
    }

    .withdraw_logo img {
        float: left;
        line-height: 6.5rem;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        margin-right: 1.1rem;
        margin-top: 2.2rem;
    }

    .withdraw_balance {

    }

    .withdraw_balance h3 {
        height: 5.5rem;
        line-height: 5.5rem;
        color: #000000;
        font-size: 1.3rem;
    }

    .withdraw_balance > div {
        font-size: 4rem;
        color: #333;
        height: 3.5rem;
        line-height: 3.5rem;
        margin-bottom: 3rem;
    }

    .withdraw_balance p {
        font-size: 1.4rem;
        color: #666;
        margin-bottom: 2rem;
    }

    .all_withdraw {
        color: #1aad1a;
    }

    .withdraw_balance div input {
        height: 4rem;
        border: 0;
        line-height: 4rem;
        float: left;
        font-size: 4rem;
        padding-left: .5rem;
        font-weight: bold;
        width: 18rem;
    }

    .withdraw_balance div span {
        display: inline-block;
        line-height: 4rem;
        float: left;
        width: 3.5rem;
        margin-top: .5rem;
        margin-left: -.55rem;
    }

    .shop_save {
        width: 100%;
        height: 4.4rem;
        border-radius: 2.2rem;
        background: #ffd74b;
        margin: 0 auto;
        font-size: 1.5rem;
        font-weight: bold;
        color: #222222;
        line-height: 4.4rem;
        box-shadow: 3px 1px 10px 1px #ffd74b;
        text-align: center;
    }

    .withdraw_balance h1 {
        display: block;
        border-bottom: 1px solid #ebebeb;
        width: 100%;
        margin-bottom: 2rem;
    }
    .withdraw_ok{
        height: 18.5rem;
        width: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -45%;
        margin-top: -9.25rem;
        background: #fff;
        border-radius: 4px;
    }
    .withdraw_ok img{
        margin: 3.3rem auto 1.5rem;
        height: 6.5rem;
        width: 6.5rem;
    }
    .withdraw_ok h2 {
        margin-bottom: 1.2rem;
        text-align: center;
        width: 100%;
        font-size: 1.5rem;
        color: black;
    }
    .withdraw_ok p {
        margin-bottom: 1.2rem;
        text-align: center;
        width: 100%;
        font-size: 1.3rem;
        color: #666;
    }
</style>
<body>
<div class="box_show">
    <div class="withdraw_ok">
        <img src="img/withdraw_ok.png" alt="">
        <h2>提现成功</h2>
        <p>提现成功后，将自动转入微信钱包</p>
    </div>

</div>
<div class="box">
    <div class="withdraw_box">
        <div class="withdraw_name">
            <div class="withdraw_logo">
                <p>提现到微信账户</p>
                <img src="img/midu-logo.jpg" alt="">
                <p class="name">名字</p>
            </div>
            <!--<div>
                修改 >
            </div>-->

        </div>
        <div style=" padding: 0 2.5rem 2.5rem;">


            <div class="withdraw_balance">
                <h3>可提现金额（元）</h3>
                <div><span>￥</span><input maxlength="6" type="text"></div>
                <h1></h1>
                <p>可提现金额<span class="all_money">555</span>元，<span class="all_withdraw">全部提现</span></p>
            </div>

            <div class="shop_save">确认提现</div>
        </div>
    </div>

</div>
</body>
<script>
    var weixinData = JSON.parse(sessionStorage.getItem('weixinData'));
    ;//用户信息
    $('.name').text(weixinData.data.nickname)
    $('.withdraw_logo img').attr('src', weixinData.data.headImgUrl)

    $('.btn_yes').click(function () {

    })
    $('.btn_esc').click(function () {
        $('.box_show').hide()
        $('.box_msg').hide()
    })
    $('.all_withdraw').click(function () {
        $('.withdraw_balance input').val($('.all_money').text())
    })
    
    $('.shop_save').click(function () {
        $('.box_show').show()
    })
</script>
</html>